<template>
  <Modal
    v-model="visible"
    width="600"
    title="结算记录"
    :mask-closable="false"
    footer-hide
    @on-visible-change="closeAudio"
  >
    <Table :columns="columns" :data="list" :max-height="maxHeight" border></Table>
  </Modal>
</template>

<script>
  import countMgr from '@/biz/flowApproval/channelCount.js'

  export default {
    props: {
      id: [Number, String]
    },
    data() {
      return {
        visible: false,
        maxHeight: '',
        columns: [
          {
            type: 'index',
            title: '序号',
            width: 80
          },
          {
            key: 'thisAmount',
            title: '结算金额(元)',
          },
          {
            key: 'calculateDate',
            title: '结算日期',
          },
          {
            key: 'userName',
            title: '结算人',
            render: (h, params) => {
              return h('div', `${params.row.userName}(${params.row.workNo})`)
            }
          },
        ],
        list: []
      }
    },
    created() {
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 250
      })
    },
    methods: {
      closeAudio(res) {
        if (res && this.id) {
          countMgr.record(this.id).then(res => {
            this.list = res
          })
        } else {
          this.list = []
        }
      },
    },
  }
</script>

<style lang='scss' scoped>
</style>